﻿@page "/datagrid-odata"
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind

@inject NorthwindODataService service

<h1>DataGrid <strong>OData</strong></h1>

<p>Use the <code>LoadData</code> event to get data from a REST service.</p>

<RadzenExample Name="DataGridOData" Heading="false" Documentation="false" AdditionalSourceCodePages="@(new [] {"../Services/NorthwindODataService.cs"})">
<RadzenDataGrid IsLoading="@isLoading" Count="@count" Data="@employees" LoadData="@LoadData" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterMode="FilterMode.Advanced" AllowSorting="true" AllowFiltering="true" AllowPaging="true" PageSize="4" TItem="Employee" ColumnWidth="200px">
    <Columns>
        <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="50px" TextAlign="TextAlign.Center" />
        <RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Filterable="false" Width="200px" >
            <Template Context="data">
                <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
        <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
        <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title" />
        <RadzenDataGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy" />
        <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" />
        <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
        <RadzenDataGridColumn TItem="Employee" Property="Address" Title="Address" />
        <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
        <RadzenDataGridColumn TItem="Employee" Property="Region" Title="Region" />
        <RadzenDataGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
        <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
        <RadzenDataGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
        <RadzenDataGridColumn TItem="Employee" Property="Extension" Title="Extension" />
        <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
    </Columns>
</RadzenDataGrid>
</RadzenExample>
<h3 style="margin-top: 32px">To data-bind to a service:</h3>
<ol>
    <li>Set the Data and Count properties.
    <pre>
        <code>&lt;RadzenDataGrid Count="@@count" Data="@@employees"</code>
    </pre>
    </li>
    <li>
        Handle the LoadData event and update the Data and Count backing fields (<code>employees</code> and <code>count</code> in this case).
    <pre>
        <code>
async Task LoadData(LoadDataArgs args)
{
    var result = await service.GetEmployees(filter: args.Filter, top: args.Top, skip: args.Skip, orderby: args.OrderBy, count: true);
    employees = result.Value.AsODataEnumerable();
    count = result.Count;
}
        </code>
    </pre>
    </li>
</ol>
@code {
    bool isLoading;
    int count;
    IEnumerable<Employee> employees;

    async Task LoadData(LoadDataArgs args)
    {
        isLoading = true;

        var result = await service.GetEmployees(filter: args.Filter, top: args.Top, skip: args.Skip, orderby: args.OrderBy, count: true);
        // Update the Data property
        employees = result.Value.AsODataEnumerable();
        // Update the count
        count = result.Count;

        isLoading = false;
    }
}
